<template>
  <div class="nav">
    <div
      v-for="(item, index) in navcategories"
      :key="index"
      :class="{ active: active === index }"
      class="nav-item"
      @click="active = index"
    >
      <nuxt-link class="nav-link" :to="item.link" tag="div">
        {{ item.title }}
      </nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    navcategories: { type: Array, required: true }
  },
  data() {
    return {
      active: 0
    }
  }
}
</script>

<style scoped>
.nav {
  display: flex;
  justify-content: space-around;
  /* padding-bottom: 1rem; */
  position: sticky;
  top: 0;
  z-index: 999;
  background: #f0f2f5;
}
.nav .nav-item {
  margin-top: 10px;
  border-bottom: 3px solid transparent;
  padding-bottom: 0.2rem;
}
.nav .active {
  color: #1890ff;
  border-bottom: 3px solid #1890ff;
}
.nav .nav-link:hover {
  color: #1890ff;
  cursor: pointer;
}
</style>
